<template>
  <div style="padding: 0 20px;">
    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height: 32px">
              相册管理
            </h3>
          </div>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <div class="grid-content bg-purple">
            <el-button size="small" type="primary" icon="el-icon-circle-plus-outline">新建相册</el-button>
            <el-button size="small" type="primary" icon="el-icon-sort">排序设置</el-button>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="15" class="whererow">
        <el-col :span="4" style="line-height: 32px">当前共{{ albums.length }}个商品相册。</el-col>
        <el-col :span="6">
          <el-input
            v-model="search"
            type="text"
            size="small"
            placeholder="请输入相册名称"
          >
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-col>
      </el-row>
    </div>

    <div class="noticerow box">
      <i class="el-icon-edit" /> &nbsp; 已选择了0项
    </div>

    <div class="box" style="background: #f9f9f9">
      <photo-album-item v-for="(item, i) in albums" :key="i" :current-album="item" />
    </div>
    <!-- <div class="pagination">
        <el-pagination
          background
          :current-page="currentPage"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div> -->
  </div>
</template>

<script>
// 导入相册项目组件
import photoAlbumItem from '@/components/album/PhotoAlbumItem'
// 导入相册列表接口
import * as api from '@/api/album'
export default {
  name: 'Index',
  components: {
    photoAlbumItem
  },
  data() {
    return {
      search: '',
      albums: [],
      currentPage: 1,
      total: 0
    }
  },
  mounted() {
    this.getAlbums()
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      this.getAlbums()
    },
    getAlbums() {
      console.log(this.currentPage)
      api.getList({
        page: this.currentPage,
        search: this.search
      }).then(response => {
        console.log(response)
        this.albums = response.data
        // this.total = response.total
      })
    }
  }
}
</script>

<style scoped>
</style>
